@extends('Admin.base')
@section('style')

@endsection
@section('content')
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-xs12">

                        <a class="layui-btn" href="{{url('admin/menu/create')}}">新增菜单</a>

                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
        </div>
    </div>
@endsection
@section('script')
    <script>
        var tableId = 'treeTable',treeGrid=null;
        layui.use(['treeGrid'], function(){
            treeGrid = layui.treeGrid;//很重要
            form = layui.form;
            ptable=treeGrid.render({
                id:tableId
                ,elem: '#'+tableId
                ,method:'post'
                ,idField:'id'
                ,url:'{{url('admin/menu/getMenuList')}}'
                ,cellMinWidth: 100
                ,treeId:'id'//树形id字段名称
                ,treeUpId:'parentid'//树形父id字段名称
                ,treeShowName:'name'//以树形式显示的字段
                ,cols: [[
                    {field:'id',width:100, title: 'ID'}
                    ,{field:'name', title: '菜单名称',templet: function(d){
                            var html = d.name;
                            if(d.icon != '' && d.icon != null){
                                html = '<i class="layui-icon '+d.icon+'" style="margin:auto 8px;"></i>'+d.name;
                            }
                            return html;
                        }}
                    ,{field:'rule', title: '规则',width:200}
                    ,{field: 'ismenu', title: '是否菜单', width:200, align:'center',templet: function(d){
                            var checked = '',html = '';
                            if(d.ismenu == '{{\App\Models\Permission::isMenuTrue}}'){
                                checked = 'checked';
                            }
                            html = '<input type="checkbox" name="ismenu" lay-skin="switch" lay-text="是|否" value="1" ' + checked + '  lay-filter="ismenu" data-id="'+d.id+'">';
                            return html;
                        }}
                    ,{field: 'status', title: '状态', width:200, align:'center',templet: function(d){
                            var checked = '',html = '';
                            if(d.status == '{{\App\Models\Permission::statusTrue}}'){
                                checked = 'checked';
                            }
                            html = '<input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭" value="1" ' + checked + '  lay-filter="status" data-id="'+d.id+'">';
                            return html;
                        }}
                    ,{width:200,title: '操作', align:'center'
                        ,templet: function(d){
                            var addBtn='<a class="layui-btn layui-btn-xs" href="{{url('admin/menu/create')}}?parentid=' +d.id+'">添加</a>';
                            var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                            var editBtn='<a class="layui-btn layui-btn-xs" href="{{url('admin/menu/')}}/'+d.id+'/edit">编辑</a>';
                            if(d.ismenu == '{{\App\Models\Permission::isMenuFalse}}'){
                                addBtn = '';
                            }
                            return addBtn+editBtn+delBtn;
                        }
                    }
                ]]
                ,page:false
            });

            treeGrid.on('tool('+tableId+')',function (obj,data) {
                if(obj.event === 'del'){//删除行
                    del(obj);
                }
            });

            function del(obj) {
                layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},
                    function(index){//确定回调
                        $.ajax({
                            url: '{{url("admin/menu/")}}/'+obj.data.id
                            , type: 'POST'
                            , dataType: 'json'
                            , data: {'_method':"DELETE"}
                            , success: function (ret) {
                                if (ret.hasOwnProperty('code') && ret.code == 200) {
                                    layer.msg(ret.message,{icon: 1,time:2000});
                                    obj.del();
                                    layer.close(index);
                                    return false;
                                }
                                layer.msg(ret.message,{icon:2});
                            }
                        });
                    },function (index) {//取消回调
                        layer.close(index);
                    }
                );
            }

            form.on('switch(ismenu)', function(data){
                $.ajax({
                    url: "{{url('/admin/menu/ismenu')}}"
                    , type: 'POST'
                    , dataType: 'json'
                    , data: {id:$(data.elem).data('id')}
                    , beforeSend:function(){
                        layer.load(2);
                    }
                    , complete: function(){
                        layer.closeAll('loading');
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            layer.msg(ret.message,{icon:1});
                            location.reload(true);
                            return false;
                        }
                        layer.msg(ret.message,{icon:2});
                    }
                });
            });
            form.on('switch(status)', function(data){
                $.ajax({
                    url: "{{url('/admin/menu/status')}}"
                    , type: 'POST'
                    , dataType: 'json'
                    , data: {id:$(data.elem).data('id')}
                    , beforeSend:function(){
                        layer.load(2);
                    }
                    , complete: function(){
                        layer.closeAll('loading');
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            layer.msg(ret.message,{icon:1});
                            return false;
                        }
                        layer.msg(ret.message,{icon:2});
                    }
                });
            });

        });
    </script>

@endsection